
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Combine Data Sets with <code>merge</code></title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-debug.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">
    #demo pre {
        font-size: .9em;
        padding: 1em;
        background-color: #fff;
        margin: 1ex;
    }
    #demo #demo_result { background-color: #ffe; }

    #demo h3 {
        margin: 1em 0 0 1ex;
    }
</style>

<!--end custom header content for this example-->

</head>

<body class="yui3-skin-sam  yui-skin-sam">

<h1>Combine Data Sets with <code>merge</code></h1>

<div class="exampleIntro">
	<p><code>merge</code> allows you to combine any number of input objects and output a single merged set.<p>
<p>
If the input is a single object, the return value will be a shallow copy of the input, meaning that the return value
is a different object, but any non-primitive value in the input object is referenced in the returned
object.
</p>

<p>Click the "Merge" button to generate the merged set, the "Copy" button to create a shallow copy of an object.</p>
			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<div id="demo">
<pre>set1 = { foo : "foo" };</pre>
<pre>set2 = { foo : "BAR", bar : "bar"  };</pre>
<pre>set3 = { foo : "FOO", baz : "BAZ" };</pre>

<input type="button" name="demo_btn1" id="demo_btn1" value="Merge"/>
<input type="button" name="demo_btn2" id="demo_btn2" value="Copy"/>
<h3>result</h3>
<pre id="demo_result">click Merge or Copy</pre>
<script type="text/javascript">

YUI({filter:"debug", logInclude: {example:true}}).use("node", "dump",
// This method is in the core of the library, so we don't have to use() any
// additional modules to access it.  However, this example requires 'node'
// and 'dump'.

function(Y) {

    var set1 = { foo : "foo" };
    var set2 = { foo : "BAR", bar : "bar" };
    var set3 = { foo : "FOO", baz : "BAZ" };
    var result = Y.one('#demo_result');

    var doMerge = function () {

        Y.log('set1 = ' + Y.dump(set1));
        Y.log('set2 = ' + Y.dump(set2));
        Y.log('set3 = ' + Y.dump(set3));

        Y.log('Merging set1, set2, and set3');
        var merged = Y.merge(set1, set2, set3);
        Y.log('merged = ' + Y.dump(merged));

        result.set('innerHTML', '<p>' + stringifyObj(merged) + '</p>');
    };

    Y.on('click', doMerge, '#demo_btn1');

    var doCopy = function () {

        // Create set4 with an object property 'obj'
        var set4 = {
            obj: {}
        };

        // Create a shallow copy of set4
        var copy = Y.merge(set4);

        // Add a property to the copy inside of the 'obj' property
        copy.obj.addedToCopy = true;

        Y.log('After modifying the copy: ');

        // The result object is not the same as the original, but
        var msg = ('"copy" should NOT be equal to the "original" (false expected): ' + (copy === set4));

        // objects in the result object will reference the same object in
        // the input object.
        msg += '<br />copy.obj.addedToCopy should be equal to original.obj.addedToCopy (true expected): ' + 
                (copy.obj.addedToCopy === set4.obj.addedToCopy);

        Y.log(msg);
        result.set('innerHTML', '<p>' + msg + '</p>');
    };

    Y.on('click', doCopy, '#demo_btn2');

    var stringifyObj = function (obj) {
        var bits = ['{ '];
        for (var k in obj) {
            bits = bits.concat([k, ' : "', obj[k], '", ']);
        }
        bits[bits.length - 1] = '" }';

        return bits.join('');
    };

});
</script>
</div>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
